<template>
	<view
		class="ikz-login"
		:style="{
			marginTop: cssInfo.margin_top + 'rpx',
			background: cssInfo.background_color,
			width: cssInfo.width + '%',
			borderRadius: cssInfo.bg_border_radius + 'rpx',
		}"
	>
		<view class="ikz-login-box" v-if="showData.user_openinfo">
			<image class="ikz-login-head" :src="showData.user_openinfo.avatar"></image>
			<view class="ikz-login-title">
				<view>{{ showData.user_openinfo.nickname }}</view>
				<view class="ikz-login-phone" v-if="showData.mobile">{{ showData.mobile }}</view>
			</view>
			<!-- 隐藏修改头像和昵称按钮 -->
			<view class="ikz-login-set" @click="toModify"><image class="ikz-login-set" src="/static/login/settings.png"></image></view>
		</view>
		<view class="ikz-login-box" v-else @click="toLogin()">
			<image class="ikz-login-head" src="/static/login/user.png"></image>
			<view class="ikz-login-title">点击登录</view>
			<view></view>
		</view>
	</view>
</template>

<script>
var app = getApp()
import ikz from '@/pages/Common/tools'

export default {
	name: 'login',
	props: {
		showData: {
			type: Object,
		},
		cssData: {
			type: Object,
		},
	},
	components: {},
	data() {
		return {
			cssInfo: {},
		}
	},
	watch: {
		showData: {
			handler(newName, oldName) {},
			immediate: true,
			deep: true,
		},
		cssData: {
			handler(newName, oldName) {
				console.log(newName)
				var cssInfo = {}
				cssInfo.margin_top = newName.margin_top || 0
				cssInfo.background_color = newName.background_color || ''
				cssInfo.width = newName.width || 100
				cssInfo.bg_border_radius = newName.bg_border_radius || 0
				this.cssInfo = cssInfo
			},
			immediate: true,
			deep: true,
		},
	},
	mounted() {},
	methods: {
		toLogin() {
			uni.navigateTo({
				url: '/pages/login/index',
			})
		},
		toModify(){
			uni.navigateTo({
				url:'/pages/login/modify?first=false'
			})
		}
	},
}
</script>

<style scoped>
.ikz-login {
	box-sizing: border-box;
	padding-top: 50rpx;
}

.ikz-login-box {
	position: relative;
	box-sizing: border-box;
	width: 95%;
	margin: 0 auto;
	padding: 0 30rpx;
	height: 200rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.6);
	border-top-left-radius: 15rpx;
	border-top-right-radius: 15rpx;
}

.ikz-login-head {
	width: 130rpx;
	height: 130rpx;
	border-radius: 50%;
}

.ikz-login-set {
	width: 60rpx;
	height:60rpx;
}

.ikz-login-title {
	width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ikz-login-btn {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.ikz-login-phone {
	font-size: 25rpx;
	color: #808080;
	margin-top: 10px;
}
</style>
